import { CSSProperties, useMemo, ReactNode } from 'react';
import { createPortal } from 'react-dom';
import { InbizIcon } from '@inbiz/utils';
import './index.less';
type ICurrentModal = {
  visible: boolean;
  className?: string;
  style?: CSSProperties;
  bodyStyle?: CSSProperties;
  wrapClassName?: string;
  title?: string | null | ReactNode;
  getContainer: () => HTMLElement;
  onBack?: React.MouseEventHandler<HTMLDivElement>;
  toolbar?: ReactNode;
  toolbarPosition?: 'left' | 'right' | 'center';
  zIndex?: number;
  destroyOnClose?: boolean;
  children?: ReactNode | null;
};

export default function CurrentModal(props: ICurrentModal) {
  const container = useMemo(
    () => props.getContainer?.() || document.body,
    [props.getContainer],
  );
  return createPortal(
    <div
      className={`currentModalWrap ${props.wrapClassName || ''}`}
      style={{
        zIndex: props.zIndex || 5,
        display: props.visible ? 'block' : 'none',
      }}
    >
      {(props.visible || !props.destroyOnClose) && (
        <div
          className={`currentModal-content ${props.className || ''}`}
          style={props.style}
        >
          <div className="currentModal-header">
            <div className="currentModal-title" onClick={props.onBack}>
              <InbizIcon type="icon-ic-fanhui" className="currentModal-back" />
              <div className="currentModal-text">{props.title}</div>
            </div>
            <div
              className={`currentModal-toolbar currentModal-toolbar-${
                props.toolbarPosition || 'right'
              }`}
            >
              {props.toolbar}
            </div>
          </div>
          <div className="currentModal-body" style={props.bodyStyle}>
            {props.children}
          </div>
        </div>
      )}
    </div>,
    container,
  );
}
